<template>
	<div class="sw_multi_mode">
		<div class="sw_multi_mode_operate">
			<show-mode v-model="showMode"></show-mode>
			<el-checkbox :indeterminate="isIndeterminate" v-model="allChecked" @change="handleCheckboxAllChecked">
				{{ checkecData.length > 0 ? `已选 ${checkecData.length} 项` : '全选' }}
			</el-checkbox>
			<template v-if="checkecData.length > 0">
				<el-button-group class="batch_button" v-if="checkecData.length > 0">
					<slot name="button" :checked="checkecData"></slot>
				</el-button-group>
			</template>
		</div>
		<div class="sw_multi_mode_content">
			<template v-if="showMode === '1'">
				<el-checkbox-group v-model="checkecData" @change="handleCheckboxChecked">
					<el-row :gutter="16">
						<el-col :span="responsive" v-for="(item, index) in catalogListData" :key="index">
							<el-checkbox :label="item.id"></el-checkbox>
							<slot name="block" :data="item">{{ item.name }}</slot>
						</el-col>
					</el-row>
				</el-checkbox-group>
			</template>
			<template v-else-if="showMode === '2'"></template>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		data: {
			type: Array,
			default() {
				return [];
			}
		},
		column: {
			type: String,
			default: '7'
		}
	},
	data() {
		return {
			showMode: '1',
			responsive: 24,
			allChecked: false,
			isIndeterminate: false,
			checkecData: []
		};
	},
	computed: {
		catalogListData() {
			return this.data;
		}
	},
	mounted() {
		this.dynamicUpdateColumn();
		window.addEventListener('resize', () => {
			this.dynamicUpdateColumn();
		});
	},
	methods: {
		//全选所有数据
		handleCheckboxAllChecked(flag) {
			this.checkecData = !flag ? [] : this.data.map((item) => item.id);
			this.isIndeterminate = false;
		},
		//选择复选框
		handleCheckboxChecked(data) {
			let checkedCount = data.length;
			this.allChecked = checkedCount === this.catalogListData.length;
			this.isIndeterminate = checkedCount > 0 && checkedCount < this.catalogListData.length;
		},
		//动态修改列
		dynamicUpdateColumn() {
			let width = document.body.clientWidth;
			for (let i = 0; i < parseInt(this.column); i++) {
				if (width >= ((i * (i + 34)) / 35) * 166 + 1200) {
					this.responsive = (i + 1) * 100;
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.sw_multi_mode {
	display: flex;
	flex-direction: column;
}
.sw_multi_mode_operate {
	height: 24px;
	padding: 12px 0 0;
	border-top: solid 1px #ebeef5;
	.show_mode_wrapper {
		float: right;
	}
	.el-checkbox {
		float: left;
		margin-top: 5px;
	}
}
:deep(.sw_multi_mode_content) {
	overflow: hidden;
	.el-row {
		margin-top: -4px;
	}
	.el-col {
		position: relative;
		margin-top: 16px;
		&.el-col-100 {
			width: 33.33333%;
		}
		&.el-col-200 {
			width: 25%;
		}
		&.el-col-300 {
			width: 20%;
		}
		&.el-col-400 {
			width: 16.66667%;
		}
		&.el-col-500 {
			width: 14.2857%;
		}
		&.el-col-600 {
			width: 12.5%;
		}
		&.el-col-700 {
			width: 11.1111%;
		}
		&.el-col-800 {
			width: 10%;
		}
		&.el-col-900 {
			width: 9.0909%;
		}
		&.el-col-1000 {
			width: 8.3333%;
		}
		&.el-col-1100 {
			width: 7.6923%;
		}
	}
	.el-checkbox {
		position: absolute;
		top: 5px;
		right: 13px;
		padding: 5px;
		z-index: 2;
	}
	.el-checkbox__label {
		display: none;
	}
}
</style>
